<template>
  <div class="manage">
    <el-card class="box-card1">
      <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
        <el-form-item label="姓名:">
          <el-input v-model="formInline.realName"></el-input>
        </el-form-item>
        <el-form-item label="身份证号:">
          <el-input v-model="formInline.identityCard"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="gettableData" size="small" :disabled ="!formInline.realName&&!formInline.identityCard">查询</el-button>
        </el-form-item>
        <div style="color:red">输入姓名和身份证查询人员信息，再进行申诉操作。</div>
      </el-form>
    </el-card>
    <el-card class="box-card" style="margin-top:15px">
      <el-table :data="tableData" style="width: 100%" :header-cell-style="{ 
      fontWeight:800}">
        <el-table-column type="index" label="序号" width="60">
        </el-table-column>
        <el-table-column prop="realName" label="姓名">
        </el-table-column>
        <el-table-column prop="identityCard" label="身份证" width="200">
        </el-table-column>
        <el-table-column prop="certProject" label="资格项目">
          <template slot-scope="scope">
            {{certProjectArr[scope.row.certProject]}}
          </template>
        </el-table-column>
        <el-table-column prop="certExpDate" label="证件有效期">
        </el-table-column>
        <el-table-column prop="phonenumber" label="联系电话">
        </el-table-column>
        <el-table-column prop="userName" label="账号">
        </el-table-column>
        <el-table-column prop="date" label="操作">
          <template slot-scope="scope">
            <el-button @click="appealClick(scope.row)" type="text" size="small">申诉</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="pagination.pageNum"
        :page-size="pagination.pageSize" :page-sizes="[10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" :total="pagination.pageTotal">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { getmaintUserAppealList, getdoWorkerAppeal } from '@/api/people'
export default {
  data () {
    return {
      certProjectArr: {
        1: '电梯电气安装维修',
        2: '电梯机械安装维修',
        3: '电梯修理'
      },
      pagination: {
        pageTotal: 0,
        pageSize: 10,
        pageNum: 1,
      },
      formInline: {

      },
      tableData: []
    }
  },
  mounted () {
    this.gettableData()
  },
  methods: {
    // 获取表格信息
    gettableData () {
      const query = {
        pageNum: this.pagination.pageNum,
        pageSize: this.pagination.pageSize,
        identityCard: this.formInline.identityCard,
        realName: this.formInline.realName
      }
      getmaintUserAppealList(query).then(res => {
        if (res.data.code == '200') {
          this.tableData = res.data.data.list
          this.pagination.pageTotal = res.data.data.total
        }
      })
    },
    handleSizeChange (val) {
      this.pagination.pageNum = 1
      this.pagination.pageSize = val
      this.gettableData()
    },
    handleCurrentChange (val) {
      this.pagination.pageNum = val
      this.gettableData()
    },
    appealClick (e) {
      this.$confirm('是否确认申诉?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const query = {
          workerId: e.id
        }
        getdoWorkerAppeal(query).then(res => {
          console.log(res)
          if (res.data.code == '200') {
            this.$message({
              type: 'success',
              message: res.data.msg
            })
          } else {
            this.$message({
              type: 'warning',
              message: res.data.msg
            })
          }
        })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消申诉'
        })
      })
    }
  }
}

</script>
<style lang="less" scoped>
::v-deep .el-form-item__label {
  font-weight: bold;
}
.manage {
  .el-pagination {
    margin-top: 2vh;
    text-align: right;
  }
}
</style>>
